<template>
  <div class="news">
    <img src="../assets/News/banner.png" style="width:100%">
    <div class="nav">
      <div class="box">
        <div class="left">
          <img src="../assets/News/icon.png" style="margin-right: 10px">
          <div>新闻中心</div>
        </div>
        <div class="navs">
          <div class="item" :class="{active:navIndex == 0}" @click="changeNavIndex(0)">集团要闻</div>
          <div class="item" :class="{active:navIndex == 1}" @click="changeNavIndex(1)">行业动态</div>
          <div class="item" :class="{active:navIndex == 2}" @click="changeNavIndex(2)">媒体报道</div>
        </div>
      </div>
    </div>

    <router-view/>
  </div>
</template>

<script>
export default{
  data(){
    return{
      navIndex:0
    }
  },
  created() {
    this.$router.push('/news-home/0')
  },
  methods:{
    changeNavIndex(navIndex){
      this.$router.push('/news-home/' + navIndex)
      this.navIndex = navIndex
    }
  }
}
</script>


<style lang="scss" scoped>
.news{
  .nav{
    width: 100vw;
    height: 92px;
    background: url("../assets/News/bg.png");
    transform: translateY(-5px);
    .box{
      color:#fff;
      width: 1100px;
      margin:  0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        height: 92px;
        display: flex;
        align-items: center;
      }
      .navs{
        width: 400px;
        align-items: center;
        display: flex;
        font-size: 20px;
        justify-content: space-between;
        .item{
          border-bottom: 5px solid transparent;
          cursor: pointer;
          line-height: 86px;
        }
        .active{
          border-bottom: 5px solid #fff;
        }
      }
    }
  }
}
</style>
